@charset "UTF-8";
@import "reset";   //引用格式化页面样式
@width:`document.documentElement.clientWidth`;
@height:`document.documentElement.clientHeight`;
////////字体样式/////////////////////////////////////////////////////////////////////////////
@font44:4.4em;
@font36:3.6em;
@font32:3.2em;
@font30:3em;
@font26:2.6em;
@font20:2em;

////////页面主颜色和背景/////////////////////////////////////////////////////////////////////
@color:#5677fc;  //页面主颜色
@bgOne:#fff;    //背景颜色
@url:"../imgaes/1.png";  //页面图标地址
.Background(@BX,@BY){
  background: url(@url) no-repeat @BX*1px @BY*1px;
}
////////弹性盒模型样式///////////////////////////////////////////////////////////////////////
.cpl-Display{
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
}
.cpl-flex(@num){
   flex: @num;
   -webkit-box-flex: @num;
   -moz-box-flex: @num;
   -webkit-flex: @num;
   -ms-flex: @num;
 }
////////头部和底部样式///////////////////////////////////////////////////////////////////////
/**头部样式**/
.header{
  width: @width * 1px; height: 112px;
  background: @color;
  position: relative;
  box-shadow: 0 2px 6px #9c9c9c;
  .mineIco {
    width: 112px;
    height: 112px;
    .Background(0,0);
    position: absolute;
    top: 0;
    left: 32px;
    .Icon {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 16px;
      left: 24px;
    }
  }
  .searchIco {
    width: 80px;
    height: 80px;
    .Background(0,-112);
    position: absolute;
    top: 16px;
    right: 112px;
  }
  .QrIco {
    width: 80px;
    height: 80px;
    .Background(0,-192);
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .addIco {
    width: 80px;
    height: 80px;
    .Background(0,-592);
    position: absolute;
    top: 16px;
    right: 16px;
  }
  z-index: 66;
  /*.return{
    width: 80px; height: 112px;
    .Background(0,0);
    position: absolute; top: 0; left: 0;
  }
  .history{
    width: 112px; height: 112px;
    .Background(-118,0);
    position: absolute; top: 0; right: 0;
  }
  p{
    font-size: @font44;
    line-height: 112px;
    text-align: center;
  }*/
}
/**底部样式**/
.footerList{
  height: 96px;
  background-color: @bgOne;
  border-top: 2px solid #b8b8b8;
  .cpl-Display;
  .insideInfo,.outsideInfo,.moreInfo {
    .cpl-flex(1);
    padding-top: 16px;
    .insideIco,.outsideIco,.moreIco {
      height: 48px;
      width: 90px;
      position: relative;
      margin: 0 auto;
      &.insideIco {
        .Background(0,-352);
      }
      &.outsideIco {
        .Background(0,-400);
      }
      &.moreIco {
        .Background(0,-448)
      }
      .num {
        width: 32px;
        height: 32px;
        position: absolute;
        top: -14px;
        right: 0;
        background-color: #ff0006;
        line-height: 32px;
        text-align: center;
        border-radius: 16px;
        color: #fff;
        font-size: 2em;
      }
    }
    .inside,.outside,.more {
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: #919191;
      font-size: @font20;
    }
    &.active {
      .insideIco {
        .Background(0,-496);
      }
      .outsideIco {
        .Background(0,-544);
      }
      .inside,.outside,.more {
        color: @color;
      }
    }
  }
}
////////页面公用样式/////////////////////////////////////////////////////////////////////////
/**页面高度样式**/
.pageStyle(@pageHeight){
  width: @width * 1px; height: (@height - @pageHeight) * 1px;
  overflow: auto;
}
/**按钮样式**/
.buttonStyle(@buttonWidth,@buttonHeight){
  width: @buttonWidth * 1px; height: @buttonHeight * 1px;
  background: @color;
  line-height: @buttonHeight * 1px;
  text-align: center;
  font-size: @font32;
  border-radius: 8px;
}
/**遮罩层样式**/
.maskLayerStyle{
  width: @width * 1px; height: @height * 1px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute; top: 0; left: 0;
  z-index: 99;
}
/**弹出层样式**/
.popUpLayerStyle(@popWidth,@popHeight){
  width: @popWidth * 1px; height: @popHeight * 1px;
  background: #ffffff;
  position: absolute; top: 50%; left: 50%;
  margin-top: -(@popHeight)/2px; margin-left: -(@popWidth)/2px;
  z-index: 100;
}
/**下拉菜单样式**/
.dropDownMenu(@dropWidth,@dropHeight){
  width: @dropWidth * 1px; height: @dropHeight * 1px;
  border: solid 1px #000000;
  border-radius: 5px;
  dt{
    line-height: @dropHeight * 1px; padding-left: 20px;
  }
  dd{
    background: #ffffff; display: none; width: @dropWidth * 1px;
    li{
      line-height: @dropHeight * 1px; padding-left: 20px;
      border-bottom: solid 1px #d6d6d6;
    }
  }
}
